<template>
  <el-container class="full-height">
    <div
      class="aside-wrapper"
      :style="{ width: actualWidth + 'px' }"
      :class="{ collapsed: isCollapsed, Dragging: isDragging }"
    >
      <el-aside class="aside">
        <div class="user">
          <div class="user-info">
            <h1>单位</h1>
            <h1>姓名</h1>
          </div>
          <!-- 折叠手柄 -->
          <div class="collapse-btn" @click="toggleCollapse">
            <el-icon :size="30">
              <ArrowRight v-if="isCollapsed" />
              <ArrowLeft v-else />
            </el-icon>
          </div>
        </div>
        <el-col class="tree-container">
          <el-tree :data="menuTree" :props="defaultProps" class="tree-view" />
        </el-col>
      </el-aside>
      <!-- 拖拽手柄 -->
      <div class="resize-handle" @mousedown="startDrag"></div>
    </div>
    <el-container class="content">
      <el-header class="header">
        <el-menu default-active="1" class="el-menu-demo" mode="horizontal" text-color="#87ceeb">
          <el-menu-item index="1" class="item" @click="clickMenu">菜单配置</el-menu-item>
        </el-menu>
      </el-header>
      <el-main></el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from 'vue';
import type { MenuItem } from '../../interface/index';
import router from '../../router';

const menuTree = ref<MenuItem[]>([
  {
    label: 'tree-1',
    children: [
      {
        label: 'tree-1-1',
      },
      {
        label: 'tree-1-2',
      },
    ],
  },
  {
    label: 'tree-1',
    children: [
      {
        label: 'tree-1-1',
      },
      {
        label: 'tree-1-2',
      },
    ],
  },
]);
const defaultProps = {
  children: 'children',
  label: 'label',
};

const asideWidth = ref(400); // 初始宽度
const minWidth = 400; // 最小宽度
const maxWidth = 800; // 最大宽度
const isDragging = ref(false); // 拖拽状态管理
// 拖拽事件处理
const startDrag = (e: MouseEvent) => {
  isDragging.value = true;
  document.body.style.userSelect = 'none';
};

const handleDrag = (e: MouseEvent) => {
  if (!isDragging.value) return;
  if (isCollapsed.value) {
    toggleCollapse();
  }
  const newWidth = e.clientX;
  if (newWidth >= minWidth && newWidth <= maxWidth) {
    asideWidth.value = newWidth;
  }
};

const stopDrag = () => {
  isDragging.value = false;
  document.body.style.userSelect = '';
};
const clickMenu = () => {
  if (isCollapsed.value) {
    toggleCollapse();
  }
  router.push('/manager/menu-manager');
};
onMounted(() => {
  document.addEventListener('mousemove', handleDrag);
  document.addEventListener('mouseup', stopDrag);
});

onUnmounted(() => {
  document.removeEventListener('mousemove', handleDrag);
  document.removeEventListener('mouseup', stopDrag);
});
const isCollapsed = ref(false);
const collapsedWidth = 30;
// 折叠/展开切换
const toggleCollapse = () => {
  // 保存当前宽度，展开时恢复
  if (isCollapsed.value) {
    asideWidth.value = Math.max(minWidth, asideWidth.value);
  }
  isCollapsed.value = !isCollapsed.value;
};
const actualWidth = computed(() => {
  return isCollapsed.value ? collapsedWidth : asideWidth.value;
});
</script>

<style scoped>
.header {
  text-align: center;
  height: 100px;
  padding: 0;
}

.aside {
  display: flex;
  flex-direction: column; /* 垂直布局 */
  text-align: center;
  overflow-y: auto;
  box-shadow: 5px 5px 10px lightblue;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.el-main {
  text-align: center;
}
.full-height {
  height: 100vh;
}
.el-menu-demo {
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: white;
}
.item {
  color: black;
  font-size: 20px;
}
.h1 {
  height: 20px;
}
.content {
  margin-left: 5px;
}
.user {
  width: 100%;
  height: 300px;
  background-color: #3274d1;
  margin: 0;
  position: relative;
}
h1 {
  margin: 0;
}
.aside-m {
  font-size: 30px;
}
.tree-view {
  margin-top: 10px;
  margin-left: 5px;
}
.tree-container {
  flex: 1; /* 占据剩余所有空间 */
  overflow-y: auto; /* 内容超出时显示垂直滚动条 */
  padding: 10px; /* 可选：增加内边距 */
}
.tree-view ::v-deep .el-tree-node__content {
  padding: 12px 20px; /* 上下内边距12px，左右20px，根据需求调整 */
}
.tree-view ::v-deep .el-tree-node__label {
  font-size: 20px;
  color: black;
}
.aside-wrapper {
  display: flex;
  position: relative;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.1);
  z-index: 10;
}
.resize-handle {
  width: 5px;
  height: 100vh;
  background-color: transparent;
  cursor: col-resize;
  position: absolute;
  right: -5px;
  top: 0;
  z-index: 15;
  transition: background-color 0.2s;
}
.resize-handle:hover {
  background-color: #87ceeb; /*  hover 时变浅蓝色 */
}
/* 折叠按钮样式 */
.collapse-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 60px;
  background-color: transparent;
  border-radius: 0 4px 4px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  z-index: 20;
  transition: all 0.2s ease background-color 0.2s;
}
.collapse-btn:hover {
  background-color: #1890ff;
}
.aside-wrapper.collapsed .tree-view {
  display: none;
}
.aside-wrapper.collapsed .user-info {
  display: none;
}
.aside-wrapper.collapsed {
  transition: width 0.5s ease;
}
.aside-wrapper:not(.collapsed) {
  transition: width 0.5s ease;
}
.aside-wrapper.Dragging {
  transition: width 0.01s ease;
}
</style>
